<template>
  <div class="loginBox">
    <div class="uImg">
      <div class="u-box">
        <img src="../assets/logo.png" alt="" />
      </div>
    </div>
    <div class="form">
      <div class="show">
        <div class="formTop">
          <div class="accountLogin">注册账号</div>
        </div>
        <div class="formInput">
          <div class="phoneI">
            <span class="iconfont icon-shouji"></span>
            <input type="text" placeholder="请输入手机号码" />
          </div>
          <div class="passwordI">
            <span class="iconfont icon-jiesuo"></span>
            <input type="text" placeholder="请输入密码" />
          </div>
          <div>
          <div class="loginButton">
            <span>注册</span>
          </div>
          <div class="register">
            <span>已有账号？</span>
            <router-link to="/login"><span class="toRegister">立即登录</span></router-link>
          </div>
        </div>
      </div>
      </div>
      <div class="hidden hidden1"></div>
      <div class="hidden hidden2"></div>
      <div class="hidden hidden3"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import "../assets/less/variable.less";
@import "../assets/font/font_icon2/iconfont.css";
.loginBox {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-image: linear-gradient(rgb(235, 137, 71), #ffa600d8);
  .uImg {
    .u-box {
      width: 70px;
      height: 70px;
      margin: 30px auto;
      background: white;
      border-radius: 50%;
      position: relative;
      img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
  .form {
    margin: 30px 30px;
    background: white;
    position: relative;
    >div {
      padding: 10px;
      border-radius: 10px;
      position: absolute;
      width: 100%;
      height: 300px;
      background: white;
      box-sizing: border-box;
    }
    .hidden{
        z-index: 0;        
        opacity: 0.3;
        left: 0;
        right: 0;
        margin: auto;
    }
    .hidden1{
        top: 8px;
        width: 94%;
    }
    .hidden2{
        top: 16px;
        width: 88%;

    }
    .hidden3{
        top: 24px;
        width: 82%;
    }
    .show{
        z-index: 99;
        .formTop{
          width: 100%;
          display: flex;
          margin-bottom: 20px;
          .accountLogin{
            margin: 0 auto;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid @color4;
            font-size: 18px;
          }
        }
        .formInput{
          >div.phoneI,div.passwordI{
            position: relative;
            margin-bottom: 10px;
            span{
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              font-size: 22px;
            }
            input{
              display: block;
              outline: none;
              border: 0;
              border-bottom: 1px solid #ccc;
              padding-left: 40px;
              height: 40px;
              width: 100%;
            }
          }
          .loginButton{
            margin-top: 30px;
            width: 100%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: orange;
            color: white;
            border-radius: 20px;
            font-size: 22px;
          }
          .register{
            text-align: center;
            font-size: 16px;
            margin-top: 20px;
            color: #ccc;
            .toRegister{
              color: @color4;
            }
          }
        }
    }
  }
}
</style>